<template>
  <div>
    <div class="swiperP">
      <u-swiper :height="350" :list="swiperList"></u-swiper>
    </div>
    <div class="contentP">
      <div class="infoP" @click="goMessageM">
        <img
          :style="{ width: '0.9rem', marginRight: '0.5rem' }"
          src="../../style/image/home/xx.png"
          alt=""
        />

        <div :style="{ fontSize: '0.65rem', fontWeight: '400' }">
          [设备升级通知]
        </div>
        <div
          :style="{
            fontSize: '0.65rem',
            marginLeft: '0rem',
            fontWeight: '300',
            fontFamily: 'PingFang SC',
          }"
        >
          尊敬的咻电伙伴，2020年...
        </div>
        <div :style="{ fontWeight: '300', fontFamily: 'PingFang SC' }">>></div>
      </div>

      <div class="cell">
        <div v-for="(item, index) in celList" :key="index" class="cell-item">
          <div>
            <img :style="{ width: '2.3rem' }" :src="item.image" alt="" />
          </div>
          <div :style="{ fontFamily: 'PingFang SC' }">{{ item.title }}</div>
        </div>
      </div>

      <div class="Title">
        <div class="myProlifIcon-title">
          <div class="myProlifIcon"></div>
          <div class="myProlifIcon-text">我的收益</div>
        </div>
        <div class="myProlifIcon-content">
          <div
            :style="{
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
            }"
          >
            <div class="advance">可提现收益</div>
            <img
              :style="{ width: '4rem', height: '1rem' }"
              src="../../style/image//home/ktxsy.png"
              alt=""
            />
          </div>
          <div class="advance-number">545544.54</div>

          <div class="prolifyP">
            <div>
              <div class="prolifyP-item-title">累计收益(元)</div>
              <div class="prolifyP-item-number">545544.54</div>
            </div>

            <div
              :style="{
                width: '0.09rem',
                height: '3.03rem',
                background: '#F3F5F7',
              }"
            ></div>

            <div>
              <div class="prolifyP-item-title">充电宝冻结收益(元)</div>
              <div class="prolifyP-item-number">545544.54</div>
            </div>
          </div>
        </div>
      </div>

      <div class="Title">
        <div class="myProlifIcon-title">
          <div class="myProlifIcon"></div>
          <div class="myProlifIcon-text">更多功能</div>
        </div>
        <div class="myProlifIcon-func-content">
          <div :style="{ width: '50%', padding: '0.5rem' }">
            <img
              :style="{ width: '100%' }"
              src="../../style/image/home/mfzhsq.png"
              alt=""
            />
          </div>
          <div :style="{ width: '50%', padding: '0.5rem' }">
            <img
              :style="{ width: '100%' }"
              src="../../style/image/home/A1.png"
              alt=""
            />
          </div>
        </div>
      </div>
    </div>

    <bar></bar>
  </div>
</template>

<script lang='ts' >
import bar from "./topbar.vue";

//  import '../../utils/uniRequest'

import { loginAPP } from "../../utils/api";

import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";

import uTabbar from "@/uview-ui/components/u-tabbar/u-tabbar.vue";

@Component({
  name: "test",
  components: {
    bar,
  },

  //    components:{
  //      bar:()=>{ import('./topbar.vue') }
  //   }
})
export default class extends Vue {
  swiperList = [
    {
      image: "https://cdn.uviewui.com/uview/swiper/2.jpg",
      title: "身无彩凤双飞翼，心有灵犀一点通",
    },
    {
      image: require("../../style/image/home/lb.png"),
      title: "昨夜星辰昨夜风，画楼西畔桂堂东",
    },

    {
      image: "https://cdn.uviewui.com/uview/swiper/3.jpg",
      title: "谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳",
    },
  ];

  celList = [
    {
      image: require("../../style/image/home/jzz.png"),
      title: "租借中",
    },
    {
      image: require("../../style/image/home/qbdd.png"),
      title: "全部订单",
    },
    {
      image: require("../../style/image/home/csjc.png"),
      title: "超时借出",
    },
    {
      image: require("../../style/image/home/fxhy.png"),
      title: "分享好友",
    },
    {
      image: require("../../style/image/home/wdsh.png"),
      title: "我的商户",
    },
    {
      image: require("../../style/image/home/wddl.png"),
      title: "我的代理",
    },
    {
      image: require("../../style/image/home/sbgm.png"),
      title: "设备购买",
    },
    {
      image: require("../../style/image/home/hysj.png"),
      title: "会员升级",
    },
  ];

  created() {
    // AppModule.selectBarAction(0)

    //  let data={
    //   phone:'123',
    //   password:'123',
    //   loginStatus:'1'
    //  }
    let fromData = new FormData();
    fromData.append("phone", "13627111557");
    fromData.append("password", "123456");
    fromData.append("loginStatus", "porxy");

    loginAPP(fromData).then((res) => {
      console.log(res, "909090");
    });
  }
  mounted() {
    //  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
  }

  goMessageM() {
    console.log("123");

    uni.navigateTo({
      url: "./message",
    });

  }
}
</script>

<style scoped   >
.contentP {
  padding: 1rem;
  background-color: white;
}
.advance-number {
  text-align: center;
  font-size: 1.11rem;
  font-family: PingFang SC;
  font-weight: 300;
  color: #ff0000;
  padding: 1rem;
}

.prolifyP {
  display: flex;
  justify-content: space-evenly;
}

.Title {
  /* //  background-color: white; */
}

.prolifyP-item-title {
  text-align: center;
  height: 0.58rem;
  font-size: 0.6rem;
  font-family: PingFang SC;
  font-weight: 300;
  color: #343434;
  line-height: 1.06rem;
}

.prolifyP-item-number {
  margin: 1rem;
  height: 0.68rem;
  font-size: 1.2rem;
  font-family: PingFang SC;
  font-weight: 390;
  color: #000000;
  line-height: 1.4rem;
}

.infoP {
  padding: 0.3rem;
  background-color: #f6f6f6;
  border-radius: 0.3125rem;

  display: flex;
  align-items: center;
  justify-content: space-around;
}

.cell {
  display: flex;
  flex-wrap: wrap;
  padding: 1rem 0rem;
}
.cell-item {
  width: 25%;
  text-align: center;
  padding: 0.5rem 0rem;
  font-size: 0.625rem;
  color: #000000;
  font-family: PingFang SC;
}

.myProlifIcon-title {
  display: flex;
  align-items: center;
  margin: 1rem 0rem;
}
.myProlifIcon-text {
  /* // width: 20.84rem;
    // height: 49.09rem; */
  margin-left: 0.3rem;
}
.myProlifIcon-func-content {
  display: flex;
}

.myProlifIcon {
  width: 0.17rem;
  height: 0.84rem;
  background: #02b074;
  border-radius: 1rem;
}
.myProlifIcon-content {
  height: 7.7rem;
  background: #ffffff;
  box-shadow: 1rem 0.5rem 1rem 0.5rem rgba(154, 154, 154, 0.18);
  border-radius: 0.5rem;
  padding: 1rem;
}

.advance {
  font-size: 0.6rem;
  font-family: PingFang SC;
  font-weight: 300;
  color: #343434;
}
</style>